<template>

  <div class="container  flex grow" style="padding-bottom:40px;">






    <div class="left flex  flex-col" style="width:60%;">
        <div class="detection-area flex-1 flex" style="height:100%">
          <div class="camera-box">
            <img src="driver1.jpg" alt="摄像头1">
            <VideoStream :stream-url="streamUrl" />
          </div>
          <div class="camera-box">
            <img src="driver2.jpg" alt="摄像头2">
          </div>
        </div>
覆盖数据库
        <div class="status-output flex-1 flex flex-col">

          <div class="title"><h3>状态输出</h3></div>
          <div class="status-list">

            <div class="websocket-container">
              <div class="connection-status">
                连接状态: {{ connectionStatus }}
              </div>



<!--              <div class="controls">-->
<!--                <button @click="connectWebSocket" class="btn btn-start mt10 mb10"-->
<!--                        :disabled="isConnected" >-->
<!--                  连接-->
<!--                </button>-->
<!--                <button @click="disconnectWebSocket" class="btn btn-stop mt10 mb10"-->
<!--                        :disabled="!isConnected">-->
<!--                  断开-->
<!--                </button>-->
<!--              </div>-->

<!--              <div class="message-container">-->
<!--                <div v-for="(message, index) in messages"-->
<!--                     :key="index"-->
<!--                     class="message-item">-->
<!--                  {{ message }}-->
<!--                </div>-->
<!--              </div>-->

              <div class="log-container">
                <div class="log-window" ref="logWindow">
                  <div v-for="(message, index) in messages"
                       :key="index"
                       class="message-item">
                    <div class="status-item">{{ message }}</div>
                  </div>
                </div>
              </div>

            </div>


<!--            <div class="log-container">-->
<!--              <div class="log-window" ref="logWindow">-->
<!--              <div v-for="(message, index) in messages"-->
<!--                   :key="index"-->
<!--                   class="message-item">-->
<!--                <div class="status-item">{{ message }}</div>-->
<!--              </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="status-item">过去15秒帧率中，Perelos得分为0.757</div>-->
<!--            <div class="status-item">前处于疲劳状态</div>-->
<!--            <div class="status-item">重新开始执行疲劳检测...</div>-->
<!--            <div class="status-item">正在用茶杯喝水</div>-->
<!--            <div class="status-item">请不要分心</div>-->
<!--            <div class="status-item">正在用茶杯喝水</div>-->
<!--            <div class="status-item">请不要分心</div>-->
<!--            <div class="status-item">正在用茶杯喝水</div>-->
          </div>
        </div>
      </div>



    <div class="control-panel flex flex-1 flex-col">



      <div class="optionTitle">疲劳检测</div>

      <div class="detection-item" style="height:100px">
<!--        <i>👤</i>-->
        <img src="/src/assets/images/slices/ico1.png" alt="">
        <span>点头检测</span>
        <div class="toggle">  <el-switch
          v-model="status"
          active-value="1"
          inactive-value="0"
          @change="handleStatusChange(status)"
        ></el-switch></div>



      </div>
      <div class="detection-item" style="height:100px">
<!--        <i>👁</i>-->
        <img src="/src/assets/images/slices/ico2.png" alt="">
        <span>闭眼检测</span>
        <div class="toggle">
          <el-switch
          v-model="status1"
          active-value="1"
          inactive-value="0"
          @change="handleStatusChange1(status1)"
        ></el-switch>
        </div>

      </div>
      <div class="detection-item" style="height:100px">
<!--        <i>😴</i>-->
        <img src="/src/assets/images/slices/ico3.png" alt="">
        <span >打哈欠检测</span>
        <div class="toggle  ">
          <el-switch
          v-model="status2"
          active-value="1"
          inactive-value="0"
          @change="handleStatusChange2(status2)"
        ></el-switch>
        </div>

      </div>
      <div class="detection-item flex-1 flex-col">
      <button class="btn btn-start mt10 mb10 "  @click="runStart" v-if="!runing">开始检测</button>
      <button class="btn btn-stop  mt10 mb10 " @click="runStop" v-if="runing">停止检测</button>
      </div>

      <div class="detection-item  flex-row f-j-sa" style="height:50px;background: none">
      <div class="flex"><router-link class="flex" :to="'/analysisStatistics'">疲劳统计</router-link>    </div>
        <div class="flex"> <router-link class="flex" :to="'/analysisLog'">疲劳日志</router-link>    </div>

      </div>



    </div>
  </div>


</template>

<script setup name="Index">

import { ref, onMounted, onUnmounted } from 'vue'

import VideoStream from './components/VideoStream.vue'
const streamUrl = 'https://your-video-stream-url.com/stream'

// @ is an alias to /src
import header from "@/components/layout/header";

import {startAnalysis, stopAnalysis,logs,charts} from "@/api/fatigue";
import {addPost} from "@/api/system/post";
import {ElMessageBox} from "element-plus";
const version = ref('4.8.2')
function goTarget(url) {
  window.open(url, '__blank')
}







const ws = ref(null)
const isConnected = ref(false)
const connectionStatus = ref('未连接')
const messages = ref([])
const logWindow = ref(null)


const MAX_LOGS = 100 // 最大显示日志数量




const scrollToBottom = async () => {

  await nextTick()
  if (logWindow.value) {
    console.log("2222", logWindow.value.scrollHeight);
    logWindow.value.scrollTop = logWindow.value.scrollHeight
  }
}

onMounted(() => {
  // connectWebSocket()
})

onUnmounted(() => {
  if (ws.value) {
    ws.value.close()
  }
})


const connectWebSocket = () => {
  ws.value = new WebSocket('ws://localhost:8080/ws/logs')

  ws.value.onmessage = (event) => {
    messages.value.push(event.data)
    if (messages.value.length > MAX_LOGS) {
      messages.value = messages.value.slice(-MAX_LOGS)
    }
    scrollToBottom()
  }


  ws.value.onopen = () => {
    isConnected.value = true
    connectionStatus.value = '已连接'
    messages.value.push('WebSocket连接已建立')
  }


  ws.value.onerror = (error) => {
    connectionStatus.value = '连接错误'
    console.error('WebSocket错误:', error)
  }

  ws.value.onclose = () => {
    isConnected.value = false
    connectionStatus.value = '已断开'
    messages.value.push('WebSocket连接已关闭')
  }

}

const disconnectWebSocket = () => {
  if (ws.value) {
    ws.value.close()
  }
}


const runing = ref(false);

function runStart() {
  runing.value = true;
  startAnalysis({}).then(response => {
    proxy.$modal.msgSuccess("启动成功");
    connectWebSocket()
  });
}

function runStop() {
  runing.value = false;
  stopAnalysis({}).then(response => {
    proxy.$modal.msgSuccess("停止成功");
    disconnectWebSocket();
  });
}


const status = ref("1");
const status1 = ref("1");
const status2 = ref("1");

// function  handleSwitchChange(val) {
//   console.log(val); // val 为 true 或 false，表示开关的当前状态
//   status.value = val?0:1;
// }
/** 用户状态修改  */
function handleStatusChange(val) {
  console.log(val);
  status.value = val === "0" ? "0" : "1";

  // let text = row.status === "0" ? "启用" : "停用";
  // proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
  //   return changeUserStatus(row.userId, row.status);
  // }).then(() => {
  //   proxy.$modal.msgSuccess(text + "成功");
  // }).catch(function () {
  //   row.status = row.status === "0" ? "1" : "0";
  // });
};
/** 用户状态修改  */
function handleStatusChange1(val) {
  status1.value = val === "0" ? "0" : "1";
  // let text = row.status === "0" ? "启用" : "停用";
  // proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
  //   return changeUserStatus(row.userId, row.status);
  // }).then(() => {
  //   proxy.$modal.msgSuccess(text + "成功");
  // }).catch(function () {
  //   row.status = row.status === "0" ? "1" : "0";
  // });
};
/** 用户状态修改  */
function handleStatusChange2(val) {
  status2.value = val === "0" ? "0" : "1";
  // let text = row.status === "0" ? "启用" : "停用";
  // proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
  //   return changeUserStatus(row.userId, row.status);
  // }).then(() => {
  //   proxy.$modal.msgSuccess(text + "成功");
  // }).catch(function () {
  //   row.status = row.status === "0" ? "1" : "0";
  // });
};


</script>

<style scoped lang="scss">
* {
  color:#ffffff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #001432;
  color: #fff;
  font-family: "Microsoft YaHei", sans-serif;
}

//.header {
//  text-align: center;
//  padding: 20px;
//  font-size: 24px;
//  background: linear-gradient(90deg, transparent, #0066cc, transparent);
//}

.container {
  display: flex;
  padding: 20px;
  gap: 20px;
}

.detection-area {
  flex: 1;
  display: flex;
  gap: 20px;
}

.camera-box {
  flex: 1;
  border: 2px solid #0066cc;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.camera-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.control-panel {
  //width: 500px;
  background: rgba(0, 102, 204, 0.1);
  border-radius: 10px;
  //padding: 20px;
}

.detection-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
  border-radius: 5px;
}

.detection-item i {
  margin-right: 10px;
  color: #0066cc;
}

.toggle {
  margin-left: auto;
  width: 40px;
  height: 20px;
  background: #0066cc;
  border-radius: 10px;
  position: relative;
}


.status-output {
  margin-top: 20px;
  background: rgba(0, 20, 50, 0.8);
  border-radius: 10px;
  padding: 15px;
  border: 1px solid #0066cc;
}

.status-output h3 {
  width:410px;height:30px;line-height: 30px;padding-left: 20px;
  background: url(/src/assets/images/slices/titlebg2.png) no-repeat center / cover;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
}

.status-list {
  height: 100%;
  overflow-y: auto;
  font-family: monospace;
}

.status-item {
  padding: 5px 0;
  color: #7cb8ff;
  font-size: 14px;
}

/* 自定义滚动条样式 */
.status-list::-webkit-scrollbar {
  width: 6px;
}

.status-list::-webkit-scrollbar-track {
  background: rgba(0, 102, 204, 0.1);
  border-radius: 3px;
}

.status-list::-webkit-scrollbar-thumb {
  background: #0066cc;
  border-radius: 3px;
}


.optionTitle {
  width:100%;height:60px;line-height: 60px;padding-left: 20px;
  background-image: url(/src/assets/images/slices/titlebg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 102, 204, 0.3);
  padding-bottom: 5px;
}

.btn {
  display: block;
  width: 100%;
  //padding: 15px;
  //margin: 10px 0;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.btn-start {
  background: #0066cc;
}

.btn-stop {
  background: gold;
}


.btn-start {
  border-top:1px solid #409EFF;
  width:200px;height:50px;line-height: 50px;
  background-image: url(/src/assets/images/slices/btn1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;


}
.btn-stop {
  border-top:1px solid #409EFF;
  width:200px;height:50px;line-height: 50px;
  background-image: url(/src/assets/images/slices/btn2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;



}
</style>

<style scoped>
.log-container {
  width: 100%;
  height: 300px;
  //border: 1px solid #ddd;
  border-radius: 4px;
}

.log-window {
  height: 100%;
  overflow-y: auto;
  padding: 10px;
  //background: #1e1e1e;
  color: #fff;
  font-family: monospace;
}

.log-item {
  padding: 2px 0;
  transition: opacity 0.3s;
}

.new-log {
  background: rgba(255, 255, 255, 0.1);
}

/* 自定义滚动条样式 */
.log-window::-webkit-scrollbar {
  width: 8px;
}

.log-window::-webkit-scrollbar-track {
  background: #2d2d2d;
}

.log-window::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 4px;
}
</style>

